<template>
  <div class="dragpannel">
    <draggable
      :list="list"
      :group="group"
      @start="drag = true"
      @end="drag = false"
      item-key="id"
      ghost-class="ghost"
    >
      <template #header>
          <div :style="{background:headerColor}" class="drag-header">{{header}}</div>
      </template>
      <template #item="{element}">
        <div class="drag-item">{{element.content}}</div>
      </template>
    </draggable>
  </div>
</template>

<script>
import { reactive } from 'vue';
import draggable from "vuedraggable";
export default {
  components: { draggable },
  props:{
      header:{
          type:String
      },
      headerColor:{
          type:String
      },
      group:{
          type:String
      },
      list:{
          type:Array
      }
  },
  setup(){

      return 
  }
};
</script>

<style scoped>
.dragpannel{
    width: 300px;
    display: inline-block;
    vertical-align: top;
}
.drag-header{
    text-align: center;
    color: #fff;
    font-size: 20px;
    padding: 10px;
    border-radius: 3px;
}
.drag-item{
    padding: 15px 10px;
    font-size: 16px;
    border: 1px solid #dfdfdf;
    border-radius: 3px;
    background: #fff;
}
.ghost {
  opacity: 0.5;
  background: #c8ebfb;
}
</style>